import { Transition } from '@headlessui/react'
import styles from './common.module.scss'
import Icons from './Icons';


interface IProps {
    errors: string
}

const DisplayError = ({ errors }: IProps) => {
    return (
        <div className={styles.display_error}>
            <Transition
                show={!!errors}
                enter="transition-opacity duration-150"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="transition-opacity duration-10"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
            >
                <div className="">
                    {/* {errors && <Icons.Exclamation className="text-red-600" />} */}
                    <span className={styles.display_error__message}>{errors}</span>
                </div>
            </Transition>
        </div>
    )
}

export default DisplayError